<template>
  <aside class="sidebar">
    <ul class="menu">
      <li class="menu-item" v-for="item in menuItems" :key="item.name">
        <router-link :to="item.path" class="menu-link" :class="{ active: isActive(item.path) }">
          <i :class="item.icon"></i>
          <span>{{ item.label }}</span>
        </router-link>
      </li>
    </ul>
  </aside>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

const menuItems = [
  { name: 'home', label: '首页', path: '/home', icon: 'el-icon-house' },
  { name: 'user', label: '用户管理', path: '/user', icon: 'el-icon-user' },
  { name: 'message-template', label: '消息模板', path: '/message-template', icon: 'el-icon-document' },
  { name: 'auto-reply', label: '自动回复', path: '/auto-reply', icon: 'el-icon-chat-line-square' },
  { name: 'send-wechat-message', label: '群发消息', path: '/send-wechat-message', icon: 'el-icon-s-help' },
  { name: 'wechat-menu', label: '公众号菜单', path: '/wechat-menu', icon: 'el-icon-pie-chart' },
]

// 计算当前路由是否激活
const isActive = (path) => {
  return route.path === path
}
</script>

<style scoped>
.sidebar {
  width: 220px;
  min-width: 220px;  /* 添加最小宽度 */
  flex-shrink: 0;    /* 防止侧边栏被压缩 */
  background-color: #2f4056;
  color: #fff;
  min-height: 100vh;
  padding-top: 20px;
  overflow-x: hidden; /* 防止内容溢出 */
  overflow-y: auto;   /* 允许垂直滚动 */
}
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-item {
  margin: 0;
}
.menu-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #b8c7ce;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.menu-link:hover, .menu-link.active {
  background-color: #1ab394;
  color: #fff;
}
.menu-link i {
  margin-right: 10px;
  font-size: 18px;
}
</style>
